<template>
    <div>
                <div class="login-container">
                    <el-form ref="form"  label-width="100px" class="login-form">
                        <h2 class="login-title">修改你的供应商信息</h2>
                        <i class="el-icon-user-solid"></i>
                        <el-form-item label="供应商名" icon="el-icon-user-solid" >
                            <el-input v-model="SupplierName" ></el-input>
                        </el-form-item>
                        <el-form-item label="供应商地址" >
                            <el-input v-model="SupplierAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商联系人" >
                            <el-input v-model="SupplierContacts"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商电话" >
                            <el-input v-model="SupplierTel"></el-input>
                        </el-form-item>
                        <el-form-item label="供应商简介" >
                            <el-input v-model="SupplierInfo"></el-input>
                        </el-form-item>
                        <el-form-item label="营业执照号" >
                            <el-input v-model="SupplierLicenseId" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="营业执照图片 ">
                            <el-upload
                                    class="avatar-uploader"
                                    action="apf/upload"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload" disabled>
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="changeInfo" class="loginButton">修改</el-button>
                        </el-form-item>
                    </el-form>

                </div>

    </div>
</template>

<script>
    import Navigation from "@/components/Navigation";
    import HeaderMenu from "@/components/HeaderMenu";
    export default {
        name: "changeSupplierInfo",

        data(){
            return{
                SupplierName:'',
                SupplierAddress:'',
                SupplierContacts:'',
                SupplierTel:'',
                SupplierInfo:'',
                SupplierLicenseId:'',
                imageUrl:'',
                nameStr:''
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.nameStr=this.$store.state.username
                this.$axios.get("api/getSupplierInfo/"+this.nameStr).then(
                    r=>{
                        console.log(r.data);
                    this.SupplierName=r.data.sname;
                    this.SupplierAddress=r.data.saddress;
                    this.SupplierContacts=r.data.scontacts;
                    this.SupplierTel=r.data.stel;
                    this.SupplierLicenseId=r.data.slicenseId;
                    this.SupplierInfo=r.data.sinfo;
                    }
                )
            },
            changeInfo(){
                let fd = new FormData()
                fd.append("supplierName",this.SupplierName);
                fd.append("supplierAddress",this.SupplierAddress);
                fd.append("supplierContacts",this.SupplierContacts);
                fd.append("supplierTel",this.SupplierTel);
                fd.append("supplierInfo",this.SupplierInfo);
                fd.append("supplierLicenseId",this.SupplierLicenseId);
                fd.append("imageUrl",this.imageUrl);
                this.$axios.get("api/changeInfo",fd).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.userName = ''
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    }
                )
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.headerImg=res
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .login-form {
        width: 600px;
        margin: 10px 50px; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }
    .login-container {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url("../img/login.jpg");
    }
    /* 标题 */
    .login-title {
        color: #303133;
        text-align: center;
    }
    .loginButton{
        align:center;
        width: 270px;
    }
</style>